<template>
    <div class="update-whouse-ownership-page">
        <el-form ref="updateWHOSForm" :inline="true" :model="updateWHOSForm" class="demo-form-inline" style="border-bottom:1px solid #ccc;position:relative;">
            <el-form-item label="法人名称" class="selectMB10 label-w2 " v-if="legalPersonDropDown.length==1" prop="legalPersonName"  :rules="[{ required: true, message: '法人名称不能为空'}]">  <!--  v-if="!powerFlag"  -->
                <el-input size="mini" disabled v-model="updateWHOSForm.legalPersonName" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="法人名称" class="selectMB10 label-w2 " v-else prop="legalPersonId"  :rules="[{ required: true, message: '法人名称不能为空'}]">  <!--  v-if="!powerFlag"  -->
                <el-select size="mini" clearable  v-model="updateWHOSForm.legalPersonId" placeholder="请选择">
                    <el-option v-for="(legalPerson,index) in legalPersonDropDown" :key="index" :label="legalPerson.legalPersonName" :value="legalPerson.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="selectMB10" style="position:absolute;right:10px;">
                <el-button class="bolder outsideBtnBS selectAll" size="mini" type="danger" @click="handleUpdate">确定</el-button>
                <el-button class="bolder outsideBtnBS selectAll" size="mini" type="danger" @click="handleBack">返回</el-button>
            </el-form-item>
        </el-form>
        <!--表格-->
        <label class="default-label">库房明细列表</label>
        <!-- 
        <el-form :inline="true" ref="form" :model="wHDetailsForm" style="display:inline-block;">
            <el-form-item label="库房明细列表" style="font-weight:bold;"></el-form-item>
            <el-form-item label="库房编码">
                <el-input size="mini" v-model="wHDetailsForm.code" placeholder="请输入库房编码"></el-input>
            </el-form-item>
            <el-form-item label="库房名称:">
                <el-input size="mini" v-model="wHDetailsForm.name" placeholder="请输入库房名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" size="mini" class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" @click="queryWHDetails">查询</el-button>
            </el-form-item>
        </el-form>
        -->
        <el-table :data="wHDetailsData" border style="width: 100%;" v-loading.body="loading" element-loading-text="拼命加载中">
            <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
            <el-table-column  label="选择" header-align="center" align="center" width="80">
                <template scope="scope">
                    <el-radio-group v-model="selectedWarehouse">
                        <el-radio :label="scope.row.id" size="mini">&nbsp;</el-radio>
                    </el-radio-group> 
                    <!--  @change="querySSDetails" -->
                </template>
            </el-table-column>
            <el-table-column prop="code" label="库房编码" header-align="center" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="库房名称" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="remark" label="库房描述" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="statusName" label="状态" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="detailAddress" label="详细地址" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="areaName" label="地区" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="nationName" label="国家" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="provinceName" label="省份" header-align="center" align="center" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="cityName" label="城市" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="countyName" label="县(区)" header-align="center" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-row :gutter="20">
            <el-col :span="12">
                <!--表格-->
                <label class="default-label">库区明细列表</label>  
                <div :model="storageSectionDetails" style="display:inline-block;margin-left:80px;">
                    <label>库区属性：</label>
                    <el-select size="mini" clearable v-model="storageSectionDetails.businessAttribute" placeholder="请选择">  
                        <!--  @change="querySSDetails" -->
                        <el-option v-for="(sSBA,index) in sSBALists" :key="index" :label="sSBA.name" :value="sSBA.id"></el-option>
                    </el-select>
                </div>
                <el-table ref="clearSel" :data="storageSectionData" border height="229" class="tableIndexDisable" style="width: 100%;margin-top:10px;" v-loading.body="loading2" element-loading-text="拼命加载中">
                    <!--  @selection-change="selectSSection" -->
                    <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                    <el-table-column type="selection" align="center"  width="40" :selectable="selectable"></el-table-column>
                    <el-table-column prop="code" label="库区编码" header-align="center" width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="name" label="库区名称" header-align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="remark" label="库区描述" header-align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="statusName" label="状态" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
                </el-table>
            </el-col>
            <el-col :span="12">
                <!--表格-->
                <label class="default-label">库位明细列表</label>
                <el-table ref="multipleTable" :data="storagePositionData" border height="229" style="width: 100%;margin-top:10px;" v-loading.body="loading3" element-loading-text="拼命加载中" @selection-change="selectSPosition">
                    <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                    <el-table-column type="selection" align="center"  width="40"></el-table-column>
                    <el-table-column prop="code" label="库位编码" header-align="center" width="100" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="name" label="库位名称" header-align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="statusName" label="状态" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
                </el-table>
            </el-col>
        </el-row>  
    </div>
</template>
<script>
       export default {
        data() {
            return {
                id:"",   // 上个页面传过来的数据
                // 查询表单
                updateWHOSForm:{
                    legalPersonId:"",
                    legalPersonName:"",
                    name:"",
                    code:"",
                    status:"",
                    remark:""
                },
                legalPersonDropDown:[],   //法人名称下拉列表
                loading:false,
                wHDetailsData:[],
                disabled:false,

                selectedWarehouse:"",   //选中的库房
                wHDetailsForm:{
                    code:"",
                    name:""
                },
                
                sSBALists:[],   // 库区业务属性下拉列表
                
                loading2:false,
                storageSectionData:[],   // 库区明细列表
                selectedstorageSectionLists:[],   //选中的库区
                storageSectionDetails:{
                    businessAttribute:""
                },
                
                loading3:false,
                storagePositionData:[],   //库位明细列表
                selectedSPositionLists:[],  //选中的库位

                
                //查询禁用
                selectDisabled:false
            };
        },
       //进入页面立即运行此方法
       mounted: function () {
            var _this = this;
            _this.$store.commit('currentActive', 'UpdateWarehouseOwnership');
            //ajax前后查询按钮禁用
            $(".selectAll").ajaxStart(function(){
                _this.selectDisabled=true;
            });
            $(".selectAll").ajaxStop(function(){
                _this.selectDisabled=false;
            });
            _this.id=_this.$route.query.id;
            _this.seeWHOS();
            _this.legalPersonDropDownValue(); //法人名称下拉列表值


            // 库区明细列表选中不可编辑
            // $(".tableIndexDisable").find(".el-checkbox__input.is-checked").addClass("is-disabled");
            // console.log($(".tableIndexDisable").find(".el-checkbox__input.is-checked"));
       },
        methods:{
            // 查看库房归属
            seeWHOS(){
                var _this = this;
                $.ajax({
                    type: 'GET',
                    url: _this.iwm_service+"CompanyStorage/queryCompanyStorageById?id="+_this.id,
                    cache: false,
                    // data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.updateWHOSForm.legalPersonName = data.data.legalPersonName;
                            _this.updateWHOSForm.legalPersonId = data.data.legalPersonId;
                            _this.wHDetailsData = data.data.warehouseVOList;
                            _this.selectedWarehouse = data.data.warehouseVOList[0].id;
                            _this.storageSectionData = data.data.storageSectionVOList;
                            for(var i=0;i<_this.storageSectionData.length;i++){
                                _this.selectedstorageSectionLists.push({"storageSectionId":_this.storageSectionData[i].id});
                            }
                            for(var j=0;j<data.data.storageBinValueList.length;j++){
                                _this.selectedSPositionLists.push({"storageBinId":data.data.storageBinValueList[j].id});
                            }
                            // _this.selectedSPositionLists=data.data.storageBinValueList;
                            _this.$nextTick(function(){
                                for(var i in _this.storageSectionData){
                                    _this.$refs.clearSel.toggleRowSelection(_this.storageSectionData[i]);//库区默认全选
                                }
                            })
                            _this.querySPDetails();   // 所有库位                            
                        }else{
                            _this.common.errorTip(data.errorMessage)
                        }
                    }
                });
            },

            //仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
            selectable(row, index){
                if(row.id){
                    return false;
                }else{
                    return true;
                }
            },

            //法人名称下拉列表值
            legalPersonDropDownValue(){  
                var _this = this;
                $.ajax({
                    type:'GET',
                    url:_this.procurement_service+"legalPerson/ofCurrentUser",
                    cache:false,
                    success:function(data){
                        if(data.success){
                            _this.legalPersonDropDown = data.data;
                            if(_this.legalPersonDropDown.length == 1){
                                _this.updateWHOSForm.legalPersonId = _this.legalPersonDropDown[0].id;
                                _this.updateWHOSForm.legalPersonName = _this.legalPersonDropDown[0].legalPersonName;
                            }
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            // 库区属性下拉列表
            wareHouseBADropDown(){
                var _this = this;
                $.ajax({
                    type:'GET',
                    url:_this.iwm_service+'storageSection/queryBusinessAttributeById?id='+_this.selectedWarehouse,
                    cache:false,
                    // data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType:"application/json;charset=utf-8",
                    success:function(data){
                        if(data.success){
                            _this.sSBALists=data.data;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            //查询所有库位明细列表
            querySPDetails(){
                var _this = this;
                _this.loading3=true;
                var tmp={
                    wareHouseId:_this.selectedWarehouse,
                    storageSectionIdList:_this.selectedstorageSectionLists
                };
                $.ajax({
                    type: 'POST',
                    url: _this.iwm_service+"StorageBin/WareHouseAndStorageSectionId",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.loading3=false;
                            _this.storagePositionData=data.data;
                            _this.$nextTick(function(){
                                _this.toggleSelection(_this.selectedSPositionLists);
                            })
                        }else{
                            _this.common.errorTip(data.errorMessage)
                        }
                    }
                });
            },
            // 修改进来  原来选中的默认选中
            toggleSelection(rows) {
                var _this =this;
                //  debugger
                if (rows) { 
                    for(var i=0;i<rows.length;i++){
                        for(var j=0;j<_this.storagePositionData.length;j++){
                            if(_this.storagePositionData[j].id == rows[i].storageBinId){
                                _this.$refs.multipleTable.toggleRowSelection(_this.storagePositionData[j]);
                                break;
                            }
                        }
                    }
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            // selection-change	当选择项发生变化时会触发该事件 
            selectSPosition(val){
                var _this=this;
                _this.selectedSPositionLists =[];
                for(var i=0;i<val.length;i++){
                    _this.selectedSPositionLists.push({"storageBinId":val[i].id});   
                }
            },
            // 确定按钮   修改库房归属
            handleUpdate(){
                var _this = this;
                _this.$refs["updateWHOSForm"].validate((valid) => {
                    if (valid) {
                       var tmp={
                            id:_this.id,
                            legalPersonId:_this.updateWHOSForm.legalPersonId,
                            legalPersonName:_this.updateWHOSForm.legalPersonName,
                            wareHouseId:_this.selectedWarehouse,
                            companyStorageSectionValueList:_this.selectedstorageSectionLists,
                            status:true,
                            companyStorageBinValueList:_this.selectedSPositionLists
                        };
                        $.ajax({
                            type: 'POST',
                            url: _this.iwm_service+"CompanyStorage/update",
                            cache: false,
                            data:JSON.stringify(tmp),
                            dataType:'JSON',
                            contentType: "application/json;charset=utf-8",
                            success: function (data) {
                                if (data.success) {
                                    _this.common.successTip("修改成功！");
                                    _this.$router.push("/WarehouseOwnership");
                                }else{
                                    _this.common.errorTip(data.errorMessage)
                                }
                            }
                        });
                    } else {
                        _this.common.errorTip("法人名称不能为空！");
                        return false;
                    }
                });  
            },
            // 返回上个页面 
            handleBack(){
                this.$router.push("/WarehouseOwnership");
            },
            // // ===================================
            // successTip(p) {     //成功时的提示信息
            //     this.$notify({
            //         title: '成功',
            //         message: p,
            //         type: 'success'
            //     });
            // },
            // errorTip(p) {     //错误提示
            //     this.$notify.error({
            //         title: '错误',
            //         message: p
            //     });
            // }

        }
    }
</script>
